import 'package:flustars/flustars.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_study/bean/ConditionBean.dart';
import 'package:flutter_app_study/utils/ImageUtil.dart';
import 'package:logger/logger.dart';

class ConditionWidget extends StatefulWidget {
  List<ConditionBean> dataList = [];
  Function(ConditionBean) onSelect;
  ConditionBean selectConditionBean;
  bool isShow = false;
  double gradHeight;

  //垂直子Widget之间间距
  double mainAxisSpacing = 10.0;

  //子Widget宽高比例
  double childAspectRatio = 3;

  //一行多少个
  int crossAxisCount = 3;

  ConditionWidget(this.dataList, {this.onSelect});

  @override
  _ConditionWidgetState createState() => _ConditionWidgetState();
}

class _ConditionWidgetState extends State<ConditionWidget>
    with TickerProviderStateMixin {
  Animation<double> animation;

  @override
  void initState() {
    // TODO: implement initState
    for (var item in widget.dataList) {
      if (item.isCheck) {
        if (widget.onSelect != null) {
          widget.onSelect(item);
        }
        widget.selectConditionBean = item;
      }
    }
    widget.gradHeight = (ScreenUtil.getInstance().screenWidth / 3.0 -
        widget.mainAxisSpacing * (widget.crossAxisCount - 1));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amberAccent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(left: 15, right: 15,top: 10,bottom: 10),
            child: InkWell(
              onTap: () {
                showOrHide(!widget.isShow);
              },
              child: Row(
                children: <Widget>[
                  Expanded(
                      child: Stack(
                    children: <Widget>[
                      Container(child: Text("标题")),
                      Container(
                          margin: EdgeInsets.only(left: 120),
                          child: Text(widget.selectConditionBean == null
                              ? ""
                              : widget.selectConditionBean.name)),
                    ],
                  )),
                  Image.asset(
                    ImageUtil.getImageAsset(
                        widget.isShow ? "bottom_arrows.png" : "top_arrows.png"),
                    fit: BoxFit.contain,
                    scale: 1.5,
                  ),
                ],
              ),
            ),
          ),
          Container(
            height: animation == null ? 0 : animation.value,
            child: GridView.count(
                //嵌套解决方法
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                //水平子Widget之间间距
                crossAxisSpacing: 10.0,
                padding: EdgeInsets.only(left:10,right: 10),
                //垂直子Widget之间间距
                mainAxisSpacing: widget.mainAxisSpacing,
                //子Widget宽高比例
                childAspectRatio: widget.childAspectRatio,
                crossAxisCount: widget.crossAxisCount,
                children: getItemWidget(widget.dataList, widget.onSelect)),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }

  showOrHide(bool show) {
    if (show) {
      showAnimation(0.0, widget.gradHeight);
    } else {
      showAnimation(widget.gradHeight, 0.0);
    }
    widget.isShow = show;
  }

  void showAnimation(double begin, double end) {
    AnimationController controller = AnimationController(
        duration: const Duration(milliseconds: 500), vsync: this);
    animation = new Tween(
            begin: begin == null ? 0.0 : begin, end: end == null ? 0.0 : end)
        .animate(controller)
          ..addListener(() {
            setState(() {});
          });
    controller.forward();
  }

  List<Widget> getItemWidget(
      List<ConditionBean> dataList, Function(ConditionBean) onSelect) {
    List<Widget> widgetList = [];
    for (var i = 0; i < dataList.length; ++i) {
      var conditionBean = dataList[i];
      widgetList.add(InkWell(
        onTap: () {
          setState(() {
            for (var item in dataList) {
              item.isCheck = false;
            }
            conditionBean.isCheck = true;
            widget.selectConditionBean = conditionBean;
            showOrHide(!widget.isShow);
            if (onSelect != null) {
              onSelect(conditionBean);
            }
          });
        },
        child: Container(
            alignment: Alignment.center,
            height: 20,
            child: Text(conditionBean.name),
            decoration: conditionBean.isCheck
                ? BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                    border: Border.all(width: 1, color: Colors.red))
                : BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                    border: Border.all(width: 1, color: Colors.grey))),
      ));
    }
    return widgetList;
  }
}
